<!--
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 *
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *            佛祖保佑       永不宕机     永无BUG
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-02 11:25:50
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-07-24 14:10:23
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <div class="app-container">
    <div class="alert-primary" style="margin-top: 16px">
      <div class="icon"><i class="el-icon-warning-outline"></i></div>
      <div class="container">
        <div class="title">体验消息</div>
        <div class="content">
          制作海报前，请准备一个消息模板，配置 UP 2.4 和 SMS 回落，并选择 "携带
          Chatbot 链接的短信"。
          <el-link
            href="/#/message/message-templates"
            type="primary"
            :underline="false"
          >
            去创建模板
          </el-link>
        </div>
      </div>
    </div>
    <el-form
      ref="form"
      class="form"
      label-position="right"
      label-width="200px"
      :model="model"
      :rules="rules"
    >
      <el-form-item label="应用名称：" prop="name">
        <el-input v-model="model.name" placeholder="请输入应用名称"></el-input>
      </el-form-item>
      <el-form-item label="应用简介：" prop="desc">
        <el-input
          v-model="model.desc"
          type="textarea"
          placeholder="请输入应用简介"
        ></el-input>
      </el-form-item>
      <el-form-item label="公司名称：" prop="sp_name">
        <el-input
          v-model="model.sp_name"
          placeholder="请输入公司名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="Logo：" prop="logo">
        <el-upload
          class="uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
        >
          <i class="el-icon-plus"></i>
          <div>上传图片</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="截屏或视频：" prop="pic">
        <el-upload
          class="uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
        >
          <i class="el-icon-plus"></i>
          <div>上传图片</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="海报主题：" prop="title_id">
        <el-select v-model="model.title_id" placeholder="请选择海报主题">
          <el-option
            v-for="item in title_list"
            :key="item.id"
            :value="item.id"
            :label="item.title"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消息模板：" prop="module_id">
        <el-select v-model="model.module_id" placeholder="请选择消息模板">
          <el-option
            v-for="item in module_list"
            :key="item.id"
            :value="item.id"
            :label="item.module"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消息通道：" prop="channel_id">
        <el-select v-model="model.channel_id" placeholder="请选择消息通道">
          <el-option
            v-for="item in channel_list"
            :key="item.id"
            :value="item.id"
            :label="item.channel"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">
          生成海报二维码
        </el-button>
        <el-button @click="$router.push('/message/applications')">
          返回
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { GetPaper, CreatePaper } from '@/api/app'
export default {
  data() {
    return {
      title_list: [],
      module_list: [],
      channel_list: [],
      model: {},
      rules: {
        name: [
          {
            required: true,
            message: '请输入应用名称',
            trigger: 'change',
          },
        ],
        desc: [
          {
            required: true,
            message: '请输入应用简介',
            trigger: 'change',
          },
        ],
        sp_name: [
          {
            required: true,
            message: '请输入公司名称',
            trigger: 'change',
          },
        ],
        logo: [
          {
            required: true,
            message: '请上传Logo',
            trigger: 'change',
          },
        ],
        pic: [
          {
            required: true,
            message: '请上传截屏或视频',
            trigger: 'change',
          },
        ],
        title_id: [
          {
            required: true,
            message: '请选择海报主题',
            trigger: 'change',
          },
        ],
        module_id: [
          {
            required: true,
            message: '请选择消息模板',
            trigger: 'change',
          },
        ],
        channel_id: [
          {
            required: true,
            message: '请选择消息通道',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {
    this.getPaper()
  },
  methods: {
    async getPaper() {
      const { code, data, msg } = await GetPaper({
        app_id: this.$route.params.id,
      })
      if (+code === 1) {
        this.model = {
          app_id: data.app_id,
          name: data.name,
          sp_name: data.sp_name,
          desc: data.desc,
          logo_url: data.logo_url,
          url_link: '',
          file: '',
          title_id: '',
          module_id: '',
          channel_id: '',
        }
        this.title_list = data.title_list
        this.module_list = data.module_list
        this.channel_list = data.channel_list

        const currentTitle = data.title_list.find(item => +item.flag === 1)
        const currentModule = data.module_list.find(item => +item.flag === 1)
        const currentChannel = data.channel_list.find(item => +item.flag === 1)

        this.model.title_id = currentTitle && currentTitle.id
        this.model.module_id = currentModule && currentModule.id
        this.model.channel_id = currentChannel && currentChannel.id
      } else {
        this.$message.error(msg)
      }
    },
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        await CreatePaper(this.model)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.alert-primary {
  border: 1px solid #91d5ff;
  border-radius: 4px;
  padding: 16px 20px 20px;
  background-color: #e6f7ff;
  display: flex;
  font-size: 14px;
  .icon {
    margin-right: 12px;
    font-size: 24px;
    color: $primary;
  }

  .title {
    margin: 4px 0 10px;
    font-size: 16px;
  }
  .content {
  }
}
.form {
  margin-top: 40px;
  width: 800px;
  .el-select {
    width: 100%;
  }
  .uploader {
    display: inline-block;
    padding: 24px 16px;
    line-height: 24px;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    background-color: #fafafa;
    cursor: pointer;
    color: #606266;
    &:hover {
      border-color: $primary;
    }
    .el-icon-plus {
      font-size: 20px;
    }
  }
}
</style>
